import { React, useEffect, useState } from 'react';
import { Mask, ImageUploader, Form, Input, Toast, NavBar, Button, Radio, DatePicker, Collapse, Space, TextArea, Avatar } from 'antd-mobile';
import { UnorderedListOutline, PayCircleOutline, SetOutline, FireFill } from 'antd-mobile-icons';
import '../css/overview.css';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import axios from 'axios';

const now = new Date();
const min = new Date('1900-01-01');

function Overview() {
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);
  const [study_name, setstudy_name] = useState('');
  const [study_end, setstudy_end] = useState('');
  const [study_content, setstudy_content] = useState('');
  const [study_cate, setstudy_cate] = useState('');
  const [id, setId] = useState('')
  const navigate = useNavigate();
  let time;
  let time1
  useEffect(() => {
    const basic = JSON.parse(localStorage.getItem('basicFact'));
      setId(basic._id)
      console.log(id);
    if (basic.study) {
      setstudy_name(basic.study.study_name);
      
      
      setstudy_end(basic.study.study_end);
      setstudy_content(basic.study.study_content);
      setstudy_cate(basic.study.study_cate);

      time1 = new Date(basic.study.study_end);
    }
  }, []);

  const back = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    });
    navigate('/overview');
  };

  const Submit = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    });
    axios.post(`http://127.0.0.1:3000/updatestudy?id=${id}&cate=study`, { study_name, study_content, study_end, study_cate }).then(
      res => {
        console.log(res);

      }
    )
    console.log(study_cate, study_end, study_content, study_name);

  };

  return (
    <>
      <div className='top'>
        <NavBar onBack={back}>
          工作经历
        </NavBar>
      </div>

      <div>
        {
          <>

            <Form
              layout='horizontal'
              onFinish={(values) => {
                Toast.show({
                  icon: 'loading',
                  content: '加载中...',
                  duration: 1000,
                });
                localStorage.setItem('basicFact', JSON.stringify(values));
                // navigate('/overviewUpdate');
              }}
              footer={
                <Button onClick={() => Submit()} block type='submit' size='large' style={{ backgroundColor: '#ffc426' }}>
                  提交
                </Button>
              }>
              <Form.Item
                name='name'
                label='学校名称*'
              >
                <Input key={study_name} onChange={(e) => setstudy_name(e)} defaultValue={study_name} placeholder='请输入' />
              </Form.Item>
              <Form.Item
                name='cate'
                label='你的专业*'
              >
                <Input key={study_cate} onChange={(e) => setstudy_cate(e)} defaultValue={study_cate} placeholder='请输入' />
              </Form.Item>
              <Form.Item
                name='study_end'
                label='离职时间'
                onClick={() => setVisible1(true)}
              >
                {study_end ? dayjs(study_end).format('YYYY-MM-DD') : 'Please select'}

                <DatePicker
                  visible={visible1}
                  max={now}
                  min={min}
                  defaultValue={time}
                  title='请选择日期'
                  onConfirm={(date) => {
                    setstudy_end(date);
                    console.log(study_end);

                    setVisible1(false);
                  }}
                  onClose={() => setVisible1(false)}
                ></DatePicker>
              </Form.Item>
              <Form.Item
                name='content'
                label='你的学历'
              >
                <Input key={study_content} onChange={(e) => setstudy_content(e)} defaultValue={study_content} placeholder='请输入' />
              </Form.Item>
            </Form>
          </>
        }

      </div>
    </>
  );
}

export default Overview;